---
title: 'Calendar views'
description: 'Learn about the different views available in the Schedule-X calendar'
---

# Calendar views

The views are the most basic building blocks of the calendar. There are
currently 5 views available, as listed below, but first:

## A note on screen sizes

The Schedule-X calendar is designed to be responsive. Given standard browser settings where 1rem = 16px, the
calendar has an internal break point of 700px: below this break point,
the calendar tries to display only views that are compatible with small
screens. Above this break point, the calendar tries to display only views
that are compatible with large screens.

If your users will view the calendar on small as well as large
screens, you need to include at least one view compatible with small screens and at least one view compatible with
large screens.

## The available views

| View name                                                    | Large screens | Small screens |
|--------------------------------------------------------------|---------------|---------------|
| Day                                                          | Yes           | Yes           |
| Month grid                                                   | Yes           | No            |
| Month agenda                                                 | No            | Yes           |
| Week                                                         | Yes           | No            |
| List                                                         | Yes           | Yes           |
| [Resource view (premium)](/docs/calendar/resource-scheduler) | Yes           | Yes           |

## An example using all views

```ts
import {
  createViewDay,
  createViewMonthAgenda,
  createViewMonthGrid,
  createViewWeek,
  createViewList,
  createCalendar
} from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'

const calendar = createCalendar({
  views: [createViewDay(), createViewMonthAgenda(), createViewMonthGrid(), createViewWeek(), createViewList()],

  events: [],
})

calendar.render(document.getElementById('calendar'))
```

## Loading events

The strategy for loading events will differ slightly depending on the view.

### Day, Week and Month views

When a user navigates to new days, weeks or months, the calendar will invoke `onRangeUpdate`, which
you can use to load the events for the new range.

```ts 
const calendar = createCalendar({
  views: [createViewDay(), createViewMonthAgenda(), createViewMonthGrid(), createViewWeek()],
 
  events: [],

  callbacks: {
    onRangeUpdate: ({ start, end }) => {
      // Load events for the new range
    }
  }
})
 
calendar.render(document.getElementById('calendar'))
```

### List view

The list view is a bit different. When a user scrolls through the list, the calendar will invoke `onScrollDayIntoView`.
You can then use this callback as a hint for when to load more events. For example, if you start by loading all events for January 2026,
you can then use this callback to load events for February 2026, when the user reaches one of the last days of January.

```ts 
const calendar = createCalendar({
  views: [createViewList()],
 
  events: [],

  callbacks: {
    onScrollDayIntoView: (date) => {
      // Load events for the new range
    }
  }
})
 
calendar.render(document.getElementById('calendar'))
```
